<style>
* {
    margin: 0px;
    padding: 0px;
}

.content {
    width: 100%;
    height: 100vh;
    /* background-color: antiquewhite; */
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url('../assets/background.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
}



.login {
    width: 350px;
    height: 300px;
    margin-top: 200px;
    /* background-color: antiquewhite; */
    position: relative;
    padding: 20px;
    /* 根据需要调整内边距 */
    background-color: rgba(255, 255, 255, 0.6);
    /* 半透明白色背景，可以根据需要调整颜色和透明度 */
    border-radius: 10px;
}

.login::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: -1;
    filter: blur(5px);
}


.input {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.login>h1 {
    /* background-color: aqua; */
    text-align: center;
}
</style>

<template>
    <div class="content">

        <div class="login">
            <h1>用户登录</h1>
            <div style="margin-top: 20px;"></div>
            <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign"
                style="max-width: 460px">
                <div class="input">
                    <el-form-item label="用户名">
                        <el-input v-model="userInfo.sysname" placeholder="请输入用户名" style="width: 300px;" />
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="userInfo.syspwd" type="password" placeholder="请输入密码" show-password
                            style="width: 300px;" />
                    </el-form-item>
                </div>
            </el-form>
            <div class="btn">
                <el-button type="primary" @click="getLogin">登录</el-button>
                <el-button type="info" @click="resetForm">重置</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage, el } from 'element-plus';
import { useRouter } from 'vue-router'
import axios from 'axios';

const router = useRouter()

//设置用户名、密码信息位置
const labelPosition = ref('top')


//重置
function resetForm() {
    userInfo.value.sysname = ''
    userInfo.value.syspwd = ''
}
//存储用户输入的登录信息
const userInfo = ref({
    sysname: "",
    syspwd: ""
})
//登录
function getLogin() {
    axios({
        method: 'post',
        url: 'https://localhost:7090/api/Login',
        data: userInfo.value
    }).then((res) => {
        if (res.data.length > 0) {
            ElMessage({
                message: '登录成功',
                type: 'success',
            });
            sessionStorage.setItem("token", res.data);
            //登录成功后跳转到首页
            router.push({ path: '/Console' });
        } else {
            ElMessage.error('用户名或密码不正确，登录失败!!!')
        }
    })

}
</script>